import { App } from 'vue'

export default {
  install(app: App) {
  
    app.directive('debounce', {
      mounted(el: HTMLButtonElement, { value }) {
        console.dir(el.children[0].tagName)
        const eBtn = el.children[0]
        console.dir(eBtn)

      }
    })

    let fn = null;//使用节流函数包装后的触发函数
    let method = null; // 需要触发的函数
    let wait = 1000;//延迟时间
    let event = 'click';//触发方式

    app.directive('throttle', {

      mounted(el, binding) {
        method = binding.value; //将传过来的回调放入method中
        if (Array.isArray(binding.value)) { 
        //如果传过来的数据是数组的话就结构赋值延迟时间及出发方式
          [method, wait = 1000, event = 'click'] = binding.value;
        }
        //使用lodash中的节流函数包装传递过来的事件
        fn = _throttle(method, wait, {
          leading: true,
          trailing: false
        });
        // 给当前元素绑定经过节流函数包装过的事件
        el.addEventListener(event, fn);
      },
      unbind(el) {
          //解绑事件
        fn && el.removeEventListener(event, fn);
      }
    });
  }
}